<template>
  <div id="breadcrumb" class="flex align-items-center">
    <svg-icon
      v-if="invisibleSidebar"
      icon-name="sprite_icons_unstaged"
      class-name="s24 pointer"
      @click.native="toggleSidebar"
    />
    <ws-breadcrumb :breadcrumb="breadcrumb" separator-class="el-icon-arrow-right" />
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import WsBreadcrumb from '@/components/shared/ws/ws-breadcrumb';

export default {
  name: 'issues-breadcrumb',
  components: { WsBreadcrumb },
  computed: {
    ...mapState({
      curSpace: 'currentSpace',
      curIssue: 'currentIssue',
      sidebarCollapsed: 'sidebarCollapsed',
      invisibleSidebar: 'invisibleSidebar',
    }),
    breadcrumb() {
      const spaceId = this.$route.params.spaceId;
      const issueId = this.$route.params.issueId;
      const breadcrumb = [{ label: '学习空间', path: '/spaces' }];
      breadcrumb.push({
        label: this.curSpace.id ? this.curSpace.title : `#${spaceId}`,
        path: `/spaces/${spaceId}`,
      });
      breadcrumb.push({
        label: '讨论区',
        path: `/spaces/${spaceId}/issues`,
      });
      if (issueId) {
        breadcrumb.push({
          label: this.curIssue.id ? this.curIssue.title : `#${issueId}`,
          path: `/spaces/${spaceId}/issues/${issueId}`,
        });
      }
      // 创建问题
      if (this.$route.path.split('/')[4] === 'new') {
        breadcrumb.push({
          label: '创建问题',
          path: `/spaces/${spaceId}/issues/new`,
        });
      }
      return breadcrumb;
    },
  },
  methods: {
    ...mapActions({
      setSidebarCollapsed: 'setSidebarCollapsed',
    }),
    // 小屏幕下的打开侧边栏
    toggleSidebar() { this.setSidebarCollapsed(!this.sidebarCollapsed); },
  },
};
</script>

<style></style>
